<template>
  <el-dialog
    :title="formData.id ? '编辑接口信息' : '新增接口信息'"
    :visible.sync="dialogVisible"
    width="600px"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="IP地址" prop="ip">
        <el-input v-model="form.ip"  :disabled="formData.id" placeholder="请输入IP地址"></el-input>
      </el-form-item>
      <el-form-item label="接口名称" prop="interface_name">
        <el-input v-model="form.interface_name" placeholder="请输入接口名称"></el-input>
      </el-form-item>
      <el-form-item label="接口地址" prop="url">
        <el-input v-model="form.url" placeholder="请输入接口地址"></el-input>
      </el-form-item>
      <el-form-item label="校验字段" prop="check_field">
        <el-input v-model="form.check_field" placeholder="请输入校验字段"></el-input>
      </el-form-item>
      <el-form-item label="期望值" prop="expected_value">
        <el-input v-model="form.expected_value" placeholder="请输入期望值"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addInterfaceInfo, updateInterfaceInfo } from '../api/interface'

export default {
  name: 'InterfaceFormDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      dialogVisible: this.visible,
      form: {
        ip: '',
        interface_name: '',
        url: '',
        check_field: '',
        expected_value: '',
        response_time: 0,
        state: 0
      },
      rules: {
        ip: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
        interface_name: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
        url: [{ required: true, message: '请输入接口地址', trigger: 'blur' }],
        check_field: [{ required: true, message: '请输入校验字段', trigger: 'blur' }],
        expected_value: [{ required: true, message: '请输入期望值', trigger: 'blur' }],
        state: [{ required: true, message: '请选择状态', trigger: 'change' }]
      }
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('update:visible', val)
    },
    formData: {
      handler(val) {
        Object.assign(this.form, val)
      },
      deep: true
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$refs.formRef.resetFields()
    },
    async handleSubmit() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          this.loading = true
          try {
            const api = this.form.id ? updateInterfaceInfo : addInterfaceInfo
            const res = await api(this.form)
            if (res.code === 200) {
              this.$message.success(this.form.id ? '更新成功' : '添加成功')
              this.$emit('success')
              this.handleClose()
            }
          } catch (error) {
            this.$message.error(this.form.id ? '更新失败' : '添加失败')
          }
          this.loading = false
        }
      })
    }
  }
}
</script> 